﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Grid.master" AutoEventWireup="true" Inherits="Genesi.Modelli" Codebehind="Modelli.aspx.cs" %>

<asp:Content ID="Content3" ContentPlaceHolderID="HtmlTitle" Runat="Server">
 
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ResultsPaneHeaderText" Runat="Server">   
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="FilterBar" Runat="Server">
 <script src="js/jquery.ui.combobox.js" type="text/javascript"></script>
    <style type="text/css">
	.ui-combobox {
		position: relative;
		display: inline-block;
	}
	.ui-button {
		position: absolute;
		top: 0;
		bottom: 0;
		margin-left: -1px;
		padding: 0;
		/* adjust styles for IE 6/7 */
		*height: 1.7em;
		*top: 0.1em;  
	}
	.ui-autocomplete-input {
		margin: 0;
		padding: 0.3em;
	}
	</style>
    <script type="text/javascript">
        function InitArticoli(idFornitore) {
            $('#selArticoli').children().remove();
            $.ajax({
                url: "/ServiceLayer/GenesiServices.svc/GetArticoli",
                type: "POST",
                data: JSON.stringify({ "idFornitore": idFornitore }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var data = $.parseJSON(result.d)

                    $('#selArticoli').append(
                        $('<option></option>').val("").html("")
                    );
                    $.each(data, function (index, item) {
                        $('#selArticoli').append(
                            $('<option></option>').val(item.id).html(item.CodArt + ' - ' + item.descrizione)
                        );
                    });

                    $('#selArticoli').combobox({
                        changed: function (event, ui) {
                            var articoloid = $(ui.item).val();
                        }
                    });
                },
                error: function (errmsg) {
                    ShowExcep(errmsg);
                }
            });

        }
        function InitFornitori() {
            $.ajax({
                url: "/ServiceLayer/GenesiServices.svc/GetFornitori",
                type: "POST",
                dataType: "json",
                success: function (result) {
                    var data = $.parseJSON(result.d)

                    $('#selFornitori').append(
                        $('<option></option>').val("").html("")
                    );
                    $.each(data, function (index, item) {
                        $('#selFornitori').append(
                            $('<option></option>').val(item.id).html(item.CodForn + ' - ' + item.Fornitore)
                        );
                    });

                    $('#selFornitori').combobox({
                        changed: function (event, ui) {
                            var fornitoreid = $(ui.item).val();
                            InitArticoli(fornitoreid);
                        }
                    });
                },
                error: function (errmsg) {
                    ShowExcep(errmsg);
                }
            });
        }
        function Filtra(model) {
            model.ModelliDispo([]);
            $.ajax({
                url: "/ServiceLayer/GenesiServices.svc/GetArticoliFilters",
                type: "POST",
                data: JSON.stringify({ "idFornitore": model.selFornitore(), "idArticolo": model.selArticolo() }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var data = ko.mapping.fromJSON(result.d)();

                    $.each(data, function (index, item) {
                        item.CanAdd = ko.computed(function () {
                            return !Enumerable.From(model.Associati()).Any(function (x) { return x.id == item.id; });
                        }, item);
                    });

                    model.ModelliDispo(data); //binding al datasource

                },
                error: function (errmsg) {
                    ShowExcep(errmsg);
                }
            });




        }
        function Associa(model, item) {
            model.Associati.push({
                Id: ko.observable(item.id()),
                Descrizione: ko.observable(item.descrizione()),
                CodArt: ko.observable(item.CodArt()),
                Iva: ko.observable(item.Iva()),
                PrezzoUnitario: ko.observable(item.PrezzoUnitario()),
                DescUnitaMisura: ko.observable(item.DescUnitaMisura())
            });
        }
        //costruttore del modello
        function ViewModel() {
            var self = this;
            self.selFornitore = ko.observable();
            self.selArticolo = ko.observable();
            self.ModelliDispo = ko.observableArray([]);
            self.Associati = ko.observableArray([]);

            self.Cerca = function () {
                Filtra(self);
            }

            self.Link = function (item) {
                Associa(self, item);
            }
        }

        var model;
        $(function () {
            model = new ViewModel();
            ko.applyBindings(model); //start motore knock
            $("#accordion").accordion({ active: 1 });
            InitFornitori();
            InitArticoli("");
        });
      

    </script>
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="GridView" Runat="Server">
<div id="accordion">
        <h3>
            <a href="#">Nuovo Modello</a></h3>
        <div id="newModel">
            <div>
                Nome Modello :
                <input type="text" id="nome" />
            </div>
            <div>
                Fornitore:
                <select id="selFornitori" data-bind="value: selFornitore">
                </select>
            </div>
            <div>
                Articoli:
                <select id="selArticoli" data-bind="value: selArticolo">
                </select>
            </div>
            <input type="button" id="Button1" value="Cerca" class="ui-widget ui-state-default ui-corner-all ui-button-text-only"
                data-bind="click: function() { Cerca(); }" />
            <div style="width: 400px; float: left">
                <ul id="articoli_dispo" data-bind="foreach: ModelliDispo">
                    <li>
                        <input type="text" data-bind="value: CodArt" readonly="readonly" />
                        <input type="text" data-bind="value: descrizione" readonly="readonly" />
                        <input type="text" data-bind="value: Iva" readonly="readonly" />
                        <input type="text" data-bind="value: PrezzoUnitario" readonly="readonly" />
                        <input type="text" data-bind="value: DescUnitaMisura" readonly="readonly" />
                        <input type="image" data-bind="click: function() { $root.Link($data); }, visible : CanAdd()"
                            src='Images/apply.png' style='border-width: 0px;' />
                    </li>
                </ul>
            </div>
            <div style="width: 400px; float: right">
                <ul id="articoli" data-bind="foreach: Associati">
                    <input type="text" data-bind="value: CodArt" readonly="readonly" />
                    <input type="text" data-bind="value: Descrizione" readonly="readonly" />
                    <input type="text" data-bind="value: Iva" readonly="readonly" />
                    <input type="text" data-bind="value: PrezzoUnitario" readonly="readonly" />
                    <input type="text" data-bind="value: DescUnitaMisura" readonly="readonly" />
                </ul>
            </div>
            <input type="button" id="btnSave" value="Salva" class="ui-widget ui-state-default ui-corner-all ui-button-text-only" />
        </div>
        <h3>
            <a href="#">Modelli</a></h3>
        <div id="Modelli">
        </div>
    </div>
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="PreviewPaneHeaderText" Runat="Server">
</asp:Content>
<asp:Content ID="Content8" ContentPlaceHolderID="PreviewPane" Runat="Server">
</asp:Content>
<asp:Content ID="Content9" ContentPlaceHolderID="TasksPaneHeaderText" Runat="Server">
  <script type="text/javascript">
 
  </script>
</asp:Content>
<asp:Content ID="Content10" ContentPlaceHolderID="TasksPane" Runat="Server">
</asp:Content>
